<?php 
session_start();
ini_set("display_errors",1);
include_once '../config.php';
$usrID=intval($_SESSION['usrID']);
$recID=intval($_GET['recID']);
?>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link href="../css/font-awesome.css" rel="stylesheet" type="text/css" />
<style>
	*{
	padding:0px;
	margin:0px;
	}
	body{
	position: relative;
      color: #333;
	font-family: tahoma, Arial, sans-serif;
	font-size: 13px;
		background:#fff;
		overflow:hidden;
		}
	i{
	color:#ccc;
}

i:hover{
	color:#999;
}
a{
	text-decoration: none;
	color:#333;
}

a:active {
    outline: none;
}
	
	
		section{
		position:relative;
		width:auto;
		height:250px;
		}
		
		section > article{
			position:relative;
			width:240px;
			height:200px;
			padding:0px 5px;
			overflow-y:scroll;
			}
		
		section > article table{
			position:relative;
			width: 100%;
			height: auto;
			border-spacing: 0px;
			border-collapse: collapse;
		}
		
		section > article table td table{
		border-bottom:1px solid #ccc;
		
		}
		
		
		
		section > article table td table td{
		vertical-align:top;
		padding:3px 0px;
		}
		
		section > article table td table td:last-child{
		width:45px;
		}
		
		section > article table tr:last-child table{
		border-bottom:none;
		}
		
		section > aside{
			position:relative;
			width:240px;
			height:20px;
			padding:0px 5px;
			}
			
		section > footer{
			position:absolute;
			bottom:0px;
			left:0px;
			width:250px;
			height:30px;
			border-top:1px solid #ccc;
			}
		section > footer > input[type='text']{
			width:100%;
			height:100%;
			border:none;
			}
.clear{
clear:both;
}
</style>
<script type="text/javascript" src="../js/ds_a.js"></script>
<script type="text/javascript" src="../js/pi.js"></script>
<script type="text/javascript" src="../js/drag.js"></script>
<script type="text/javascript" src="../js/json.js"></script>
<script type="text/javascript">
function add(evt,recID){
	if (evt.keyCode==13){
		var obj=evtObj(evt),msg=obj.value;
		if(msg.isEmpty()) return false;
			bind("Me",msg,null);
			obj.value='';
			thread(['add.php?recID='+recID,'msg='+escape(msg)],function(){},function(e){},function(){});
		}
}

function bind(name,msg,chatID){
	var tr=document.createElement("tr");
	tr.innerHTML="<td style='position:relative'>"+((name=="Me")?(''):("<input type='hidden' name='chatID' value='"+chatID+"'/>"))+"<table><tbody><tr><td>"+name+"</td><td><time>time</time></td></tr><tr><td colspan='2'>"+msg+"</td></tr></tbody></table></td>";
	getObj('chat_tb').tBodies[0].appendChild(tr);
	getObj('chat_tb_wrap').scrollTop=getObj('chat_tb_wrap').scrollHeight;
}

function seen(recID){
	thread(['seen.php?recID='+recID],function(){},function(e){},function(){});
}

var stopTyping=trigger(function(){//sender stop typing
	thread(['typing.php?recID=<?=$recID;?>','status=0'],function(){},function(e){},function(){});
},3);

function typing(){//sender is typing
	thread(['typing.php?recID=<?=$recID;?>','status=1'],function(){},function(e){},function(){});
	stopTyping();
}

function isTyping(){//friend is typing
	thread(['isTyping.php?recID=<?=$recID;?>'],function(){},function(e){getObj('is_typing').innerHTML=(parseInt(e.responseText)==1)?('Typing...'):('');},function(){});
}

function fetch(){
	var chatIDs=getObj('chat_tb').getFormData("hidden",function(o){ return o.name=='chatID';});
	isTyping();
	thread(['fetch.php?recID=<?=$recID;?>','lastID='+chatIDs[chatIDs.length-1]],function(){
		},function(e){
		var data=e.responseText.parseJSON();
		if(data.length > 0){
       		 for(var i=0;i<data.length;i++){
       			chatIDs=getObj('chat_tb').getFormData("hidden",function(o){ return o.name=='chatID';});
				if(!chatIDs.in_array(parseInt(data[i]['chatID']))) bind(data[i]['name'],data[i]['msg'],data[i]['chatID']);
}
		}
	},function(){});
}

addEvent(window,"load",function(){
	thread=ajaxThread();
	if (window.document.readyState=="complete"){
		getObj('chat_tb_wrap').scrollTop=getObj('chat_tb_wrap').scrollHeight;
		setInterval(function(){fetch();},2000);
		}
}
	);
</script>
</head>
<body>
<section>
<article id='chat_tb_wrap'>
<table id='chat_tb'>
<tbody>

<?php
foreach($pdo->query("select c.chatID,c.msg,if(c.usrID=$usrID,'Me',concat(u.lname,' ',u.fname)) as name from (chat c join usr u on u.usrID) where u.usrID=c.usrID and ((c.usrID=$recID and c.recID=$usrID) or (c.recID=$recID and c.usrID=$usrID)) order by c.chatID asc") as $fetch){
?>
<tr><td style='position:relative'>
<?=($fetch['name']=="Me")?(NULL):("<input type='hidden' name='chatID' value='{$fetch['chatID']}'/>");?>
<table>
<tbody>
<tr><td><?=$fetch['name'];?></td><td><time>time</time></td></tr>
<tr><td colspan='2'><?=$fetch['msg'];?></td></tr>
</tbody>
</table>
</td></tr>
<?php
}
?>

</tbody>
</table>
</article>
<aside><small><em id='is_typing'></em></small></aside>
<footer><input type='text' placeholder='&nbsp;Send a message' onkeydown="typing()" onfocus="seen(<?=$recID;?>)" onmouseover="this.focus()"  onkeyup="add(event,<?=$recID;?>)"/></footer>
</section>

</body>
</html>
